<template>
    <div class="table">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>藏品详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container">
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>所属分类：</label>
                    </div>
                    <div class="d-right clearfix" style="width:800px">
                        <div class="row">
                            <span>{{data.category_name1}}</span> / <span>{{data.category_name2}}</span> / <span>{{data.category_name3}}</span>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>中文标题：</label>
                    </div>
                    <div class="d-right">
                        <label>{{data.title_cn}}</label>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>英文标题：</label>
                    </div>
                    <div class="d-right">
                        <label>{{data.title_en}}</label>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>藏品轮播图：</label>
                    </div>
                    <div class="d-right">
                        <div class="detail-img-box" v-for="(item,index) in bannerImgs" :key="index">
                            <img class="detail-img" :src="item"/>
                        </div>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left">
                        <label>藏品详情图：</label>
                    </div>
                    <div class="d-right">
                        <div class="detail-img-box" v-for="(item,index) in detailImgs" :key="index">
                            <img class="detail-img" :src="item"/>
                        </div>
                    </div>
                </div>
                <!-- 普通项目显示 -->
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>优惠价：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">￥{{data.price}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>审核费用：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">￥{{data.check_fee}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>藏品数量：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">￥{{data.stock}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>发布人：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.nick_name}}</p>
                    </div>
                </div>
                 <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>手机号码：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.mobile}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>所在地：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.province}}{{data.city}}{{data.district}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>来源：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">中文{{data.source_cn}}  英文{{data.source_en}}</p>
                    </div>
                </div>
                 <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>品相：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">中文{{data.out_view_cn}}  英文{{data.out_view_en}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>描述（中文）：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.description_cn}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>描述（英文）：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.description_en}}</p>
                    </div>
                </div>
              
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>发布时间：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce">{{data.create_time}}</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>支付方式：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce" v-show="data.pay_type==1">支付宝</p>
                        <p class="introduce" v-show="data.pay_type==2">微信</p>
                        <p class="introduce" v-show="data.pay_type==3">余额</p>
                    </div>
                </div>
                <div class="content-rows clearfix" >
                    <div class="d-left">
                        <label>审核状态：</label>
                    </div>
                    <div class="d-right">
                        <p class="introduce" v-show="data.state==1">待审核</p>
                        <p class="introduce" v-show="data.state==2">审核通过</p>
                        <p class="introduce" v-show="data.state==3">审核不通过</p>
                    </div>
                </div>
                <div class="content-rows clearfix">
                    <div class="d-left d-empty-left">
                       <label></label>
                    </div>
                    <div class="d-right clearfix" >
                        <el-button type="primary" style="width:200px;" @click="goBack">返回</el-button>
                    </div>
                </div>
                <div style="height:100px;"></div>
            </div>
        </div>
</template>
<script>
import { getGoodsDetails } from "@/api/subsection/publish";
export default {
    name:"detail",
    data (){
        return{
            id:'',//详情id
            detailImgs:[],//详情图集
            bannerImgs:[],//轮播图
            iscollage:false,//是否为拼团项目，默认false
            isCheckboxActive:false,//是否可预约，默认false
            is_hot:false,//是否是热门项目：0否，1是
            projectUrl:'/project',//0 从总部项目列表过来 1 从门店项目列表过来
            data:[]
        }
    },
    created (){
        this.id = this.$route.query.id;
        //console.log(this.id);
        this.getDetailsData();
    },
    mounted: function () {
        this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
            if(this.$route.query.branch){
                this.projectUrl ="/subsection/goodsCheck";
            }
        })
    },
    methods:{
         //获取详情data数据
        getDetailsData(){
            getGoodsDetails(this.id).then(response => {
                // console.log(response);
                if (response.code == 200) {
                   this.data = response.data;
                   this.bannerImgs = this.data.banner_img;//bannerImgs
                   this.detailImgs = this.data.img_list;//详情图
                }else{
                this.$notify.error({
                    title: "异常",
                    offset: 100,
                    message: response.msg
                });
                }
            });
        },   
        //返回上一页 
        goBack(){
            // this.$router.push('/subsection/goodsCheck')
            // history.go(-1);
            this.$router.go(-1);
        }        
    }
}
</script>
<style lang="stylus" scoped>
*{
    font-size :14px;
}
    .content-rows{
        margin-bottom:15px;
        .d-left{
            float :left;
            width :120px;
            text-align:right
            &.d-empty-left{
                height :45px;
            } 
        }
        .d-right{
            float :left ;
            padding-left 20px;
            .headImg{
                width :250px;
                height :150px;
            }
            .introduce{
            
                line-height :20px;
            }
            .row{
                padding 0px 0px 10px 0px
            }
            .detail-img-box{
                float :left;
                margin-right :10px;
                margin-bottom :10px;
               .detail-img{
                 width :250px;
                 height :auto; 
               } 
            }
            .checked-box{
                position :relative;
                display:inline-block;
                margin-right :22px;
                .checkbox-outer{
                    .checkbox-inner{
                        float :left;
                        position: relative;
                        border: 1px solid #dcdfe6;
                        border-radius: 2px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        width: 15px;
                        height: 15px;
                        background-color: #f5f7fa;;
                        z-index: 1;
                    } 
                    .checkbox-label{
                        float :left;
                        padding-left: 10px;
                        line-height: 15px;
                        font-size: 13px;
                    } 
                }
                &.active{
                    .checkbox-outer{
                        .checkbox-inner{
                            background-color: #409EFF;
                            border-color: #409EFF;
                        }
                        .checkbox-inner::after{
                            -webkit-box-sizing: content-box;
                            box-sizing: content-box;
                            content: "";
                            border: 1px solid #fff;
                            border-left: 0;
                            border-top: 0;
                            height: 7px;
                            left: 4px;
                            position: absolute;
                            top: 1px;
                            -webkit-transform: rotate(45deg) scaleY(0);
                            -ms-transform: rotate(45deg) scaleY(0);
                            transform: rotate(45deg) scaleY(1);
                            width: 3px;
                        }
                        .checkbox-label{
                            color: #409EFF;
                        }
                    }
                   
                }
            }
        }
    }
</style>


